<template>
	<div>
    <div style="width: 100%;background-color: white;display: flex;justify-content: center;align-items: center">
      <div style="width: 94%;margin-top: 40px;margin-bottom: 40px;">
        <div style="width: 100%;height: 180px;display: flex;justify-content: center;border-bottom: #e7e7e7 solid 1px">
          <div style="width: 650px;height: 150px;display:flex;">
            <div style="width: 30%;height: 100%;display: flex;align-items: center;justify-content: center">
              <img src="~assets/img/payment.png">
            </div>
            <div style="width: 70%;height: 100%;">
              <div style="height: 70%;width: 100%;display: flex;align-items: center">
                <span style="font-size: 26px;margin-top: 40px;">订单已提交，等待付款￥{{content.total}}</span>
              </div>
              <div style="height: 30%;width: 100%;">
                <span style="font-size: 14px;">30分钟内未付款将自动取消订单</span>
              </div>
            </div>
          </div>
        </div>
        <div style="width: 100%;border-bottom: #e7e7e7 solid 1px;">
          <div style="margin-top: 30px;margin-bottom: 40px;display: flex">
            <div style="width: 15%;"></div>
            <div style="width: 85%;">
              <div style="width: 100%;height: 40px;font-size: 14px;display: flex;">
                <div style="width: 30%;height: 100%;display: flex;align-items: center">{{content.contName}}</div>
                <div style="width: 35%;height: 100%;display: flex;align-items: center">{{content.contPhone}}</div>
                <div style="width: 35%;height: 100%;display: flex;align-items: center">
                  {{content.areaAdress[0]}}&nbsp;
                  {{content.areaAdress[1]}}&nbsp;
                  {{content.areaAdress[2]}}&nbsp;
                  {{content.careAdress}}
                </div>
              </div>
              <div v-for="item in content.comMsg" style="width: 100%;display: flex;justify-content: space-between;font-size: 14px;">
                <div style="width: 280px;height: 50px;">
                  <div style="width: 196px;height: 50px;display: flex;align-items: flex-end">
                    <span>
                      {{item.currentSerName}}
                      {{item.currentColor}}
                      {{item.currentConfig}}
                    </span>
                  </div>
                </div>
                <div style="width: 337px;height: 50px;display: flex;align-items: flex-end">
                  <span>服务: {{item.serviceMsg}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="width: 100%;height: 100px;border-top: #e7e7e7 solid 1px">
          <div style="width: 100%;height: 30px"></div>
          <div style="width: 100%;height: 70px;">
            <submit-button button-back-color="#e7e7e7" @click="clickzfbAplipay()"  button-font-color="green" text-msg="支付宝支付" button-width="200" button-height="40"></submit-button>
          </div>
        </div>
        <div>
          <div id="zhifubao"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from "vuex"

  import SubmitButton from "../../components/content/detailPage/SubmitButton";

  import {zhifubaoAlipay} from "../../network/home";

  export default {
    name: "PaymentChild",
    data(){
      return {
        content: {}
      }
    },
    components: {
      SubmitButton
    },
    computed: {
      ...mapGetters({
        "getData": "Order/getManyDataByOrderId"
      })
    },
    methods: {
      clickzfbAplipay(){
        var comDescription = this.content.comMsg[0] || this.content.comMsg[0].currentSerName;
        zhifubaoAlipay(this.content.total,comDescription)
        .then(data => {
          console.log(data.data);
          let fromdom = "<form name='punchout_form' method='post' action='https://openapi.alipaydev.com/gateway.do?charset=utf-8&method=alipay.trade.page.pay&sign=Dk0vdlQzkdVvpjLaJJWyfxHCuBTYf0AxhaRlnseAfpvrf%2F54tEvIBkIkuUbUJycQV0kL%2FV%2FcVN0O7CSCaOcVDZZve9hnMHhCE94zLm0rki4%2ButVVJ3nzsia9PvYEkB6VQ4JQF2FUfHVESvJZXcfrHbE9E9Kb1ZZXRL3rGIRaVEOgRRc7rqALO7m9HsUjgtwKlEo9qaKbNTqMz%2FnG9575CpVGBmDsWEtlUHJlP0VD4%2FN4TB9%2FvEwaUnA6YMr7qZiujyCYAI67x3GRSs45L3coL%2FX72splNa5aEoOW63BDUWAMtmHGszLiu4%2FfKIwhUkhnaUrX72c67wxj4Cp7itlDRw%3D%3D&return_url=http%3A%2F%2Flocalhost%3A8080%2F%23%2FpersonEnter&notify_url=http%3A%2F%2Flocalhost%3A8080%2Falipay.trade.page.pay-JAVA-UTF-8%2Fnotify_url.jsp&version=1.0&app_id=2021000118604866&sign_type=RSA2&timestamp=2021-08-22+11%3A15%3A13&alipay_sdk=alipay-sdk-java-3.3.49.ALL&format=json'>"
            + "<input type='hidden' name='biz_content' value='{&quot;out_trade_no&quot;:&quot;f3b11da0-409c-4bb5-bbea-23eb34fbbc12&quot;,&quot;total_amount&quot;:&quot;10247&quot;,&quot;subject&quot;:&quot;OOPPO Find X3 Pro&quot;,&quot;body&quot;:&quot;尊敬的会员欢迎购买奥迪A8 2021款 A8L 60 TFSl quattro豪华型&quot;,&quot;product_code&quot;:&quot;FAST_INSTANT_TRADE_PAY&quot;}'>"
            + "<input type='submit' value='立即支付' style='display:none' >"
            + "</form>"
          let elementById = document.getElementById("zhifubao");
          elementById.innerHTML = data.data;
          return Promise.resolve(true);
        }).then(data => {
          document.forms[0].submit();
        })
      }
    },
    created() {
      //接收路由过来的订单编号
      let orderId = this.$route.query.orderId;
      //向vuex请求数据
      this.content = this.getData(orderId);
    }
  }
</script>

<style scoped>

</style>
